<!--  -->
<template>
    <div class='item'>
        <p>
            <span v-show="!isActive" @click="activeItem">{{item}}</span>
            <span v-show="isActive">
                <input v-model="content" v-on:blur="inactiveItem" type="text">
            </span>
            <span @click="$emit('deleteitem', index)"> X </span>
        </p>
    </div>
</template>

<script>

export default {
    name:'TodoListItem',
    props: ['index','item'],
    data() {
    //这里存放数据
        return {
            content:'',
            isActive:false,
        };
    },
    //方法集合
    methods: {
        activeItem(){
            this.isActive = true;
            this.content = this.item;
        },
        inactiveItem(){
            this.$emit('modifyItem',this.index,this.content);
            this.isActive =false;
        }
    }

}
</script>
<style  scoped>
    p span:nth-child(1){
        color: blue;
    }
    p span:nth-child(3){
        color: red;
        font-size: 20px;
    }
</style>